<template>
    <!-- 精选贷款 -->
    <div class="madp-loans" v-show="list.length > 0">
        <div class="header">
            <span>精选贷款</span>
            <span class="cursor-pointer" @click="getMore">更多</span>
        </div>
        <div :class="['container', showScrollX ? '' : 'hideScroll']">
            <div class="list">
                <div class="item cursor-pointer" v-for="(item, idx) in list" :key="idx" id="loans-id">
                    <img class="loans-image" :src="item.image1" alt="" @click="mxHandleClick(item, idx)" />
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import { isPcWeixin } from '@/utils/util';
    import financialApi from '@/api/financial-shop.js';
    import mxProductImage from '@/mixin/mxProductImage.js';
    export default {
        mixins: [mxProductImage],
        components: {},
        data() {
            return {
                showScrollX: false,
                list: []
            };
        },
        props: {
            wxUserId: {
                type: String,
                default: ''
            },
            sort: {
                type: Number,
                default: 0
            }
        },
        watch: {
            wxUserId: function () {
                if (this.wxUserId) {
                    this.getProductList();
                }
            }
        },
        created() {},
        mounted() {
            if (this.wxUserId) {
                this.getProductList();
            }
            if (isPcWeixin()) {
                this.showScrollX = true;
            }
        },
        methods: {
            getMore() {
                this.$sensorsSend('MktClick', {
                    recommend_id: this.$store.state.vuex_wxUserId,
                    $title: '首页',
                    mkt_type: '',
                    mkt_name: '贷款',
                    mkt_location: this.sort,
                    mkt_content_name: '金融小店',
                    mkt_content_type: '贷款'
                });
                this.$router.push({
                    path: '/financialShop/picture-list',
                    query: {
                        type: 4,
                        wxUserId: this.wxUserId
                    }
                });
            },
            getProductList() {
                financialApi
                    .getOtherProductList({
                        current: 1,
                        size: 10,
                        status: 1,
                        type: 4,
                        wxUserId: this.wxUserId
                    })
                    .then((res) => {
                        let list = res.data.data.records;
                        this.list = list;
                    });
            }
        }
    };
</script>
<style scoped lang="scss">
    .madp-loans {
        width: 100%;
        margin-bottom: 16px;
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 8px 0;
            :nth-child(1) {
                font-size: 18px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 600;
                color: #2c2c2c;
            }
            :nth-child(2) {
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: rgba(32, 32, 32, 0.8);
            }
        }
        .container {
            width: 100%;
            overflow: hidden;
            overflow-x: scroll;
            .list {
                white-space: nowrap;
                .item {
                    position: relative;
                    display: inline-block;
                    margin-right: 8px;
                    width: 124px;
                    height: 167px;
                    background: #ffffff;
                    box-shadow: 0px 3px 6px 0px rgba(181, 181, 181, 0.16);
                    border-radius: 8px;
                    .loans-image {
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }
        .hideScroll {
            scrollbar-width: none; /* firefox */
            -ms-overflow-style: none; /* IE 10+ */
        }
        .hideScroll::-webkit-scrollbar {
            display: none; /* Chrome Safari */
        }
    }
</style>
